<template>
  <div class="que">
    <div class="nav-header">
      数据报表
    </div>
    <div class="nav-search">
      <div class="base-search">
        <div class="search-item">
          <span>填表日期：</span>
          <div class="min-picker">
            <el-date-picker size="small"
                            v-model="search.dateRange"
                            value-format="yyyy-MM-dd"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </div>
        <div class="search-item">
          <span>姓名：</span>
          <div class="min-input">
            <el-input v-model="search.name" placeholder="姓名" maxlength="5" size="small"></el-input>
          </div>
        </div>
        <div class="search-item">
          <span>学号(工号)：</span>
          <div class="min-input">
            <el-input v-model="search.number" placeholder="工号" maxlength="11" size="small"></el-input>
          </div>
        </div>
        <div class="search-item">
          <span>身体状况：</span>
          <div style="width: 180px">
            <el-select v-model="search.body" size="small"
                       multiple clearable
                       collapse-tags
                       placeholder="请选择">
              <el-option v-for="(bd, idx) in bodyOptions"
                         :value="bd.value" :label="bd.label"
                         :disabled="bd.disabled">{{bd.label}}
              </el-option>
            </el-select>
          </div>
        </div>

        <div class="search-btns">
          <el-button v-if="!showMoreSearch" plain size="mini" icon="el-icon-arrow-down"
                     @click="showMoreSearch = true">更多
          </el-button>
          <el-button v-else plain size="mini" icon="el-icon-arrow-up"
                     @click="showMoreSearch = false">收起
          </el-button>
        </div>
      </div>
      <div class="more-search" v-show="showMoreSearch">
        <div class="line-search">
          <div class="search-item">
            <span>所在地区：</span>
            <div class="medium-select">
              <el-cascader size="mini"
                           v-model="search.location"
                           :options="locationOpts"></el-cascader>
            </div>
          </div>
          <div class="search-item">
            <span>在校居住：</span>
            <div class="min-select">
              <el-select v-model="search.inDorm" size="small"
                         clearable
                         collapse-tags
                         placeholder="请选择">
                <el-option :value="1" label="是">是</el-option>
                <el-option :value="0" label="否">否</el-option>
              </el-select>
            </div>
          </div>
          <div class="search-item">
            <span>在校上班：</span>
            <div class="min-select">
              <el-select v-model="search.workInSchool" size="small"
                         clearable
                         collapse-tags
                         placeholder="请选择">
                <el-option :value="1" label="是">是</el-option>
                <el-option :value="0" label="否">否</el-option>
              </el-select>
            </div>
          </div>

          <div class="search-item">
            <span>是否封路：</span>
            <div class="min-select">
              <el-select v-model="search.hasBlock" size="small"
                         clearable
                         collapse-tags
                         placeholder="请选择">
                <el-option :value="1" label="是">是</el-option>
                <el-option :value="0" label="否">否</el-option>
              </el-select>
            </div>
          </div>

          <div class="search-item">
            <span>外出聚会：</span>
            <div class="min-select">
              <el-select v-model="search.hasOut" size="small"
                         clearable
                         collapse-tags
                         placeholder="请选择">
                <el-option :value="1" label="是">是</el-option>
                <el-option :value="0" label="否">否</el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="line-search">
          <div class="search-item">
            <span>周围人有症状：</span>
            <div class="min-select">
              <el-select v-model="search.hasRound" size="small"
                         clearable
                         collapse-tags
                         placeholder="请选择">
                <el-option :value="1" label="是">是</el-option>
                <el-option :value="0" label="否">否</el-option>
              </el-select>
            </div>
          </div>

          <div class="search-item">
            <span>接触武汉：</span>
            <div class="min-select">
              <el-select v-model="search.hasWuhan" size="small"
                         clearable
                         collapse-tags
                         placeholder="请选择">
                <el-option :value="1" label="是">是</el-option>
                <el-option :value="0" label="否">否</el-option>
              </el-select>
            </div>
          </div>

          <div class="search-item" v-show="search.hasWuhan">
            <span>武汉相关问题：</span>
            <div class="lg-select">
              <el-select v-model="search.ques" size="small"
                         multiple clearable
                         collapse-tags
                         placeholder="请选择">
                <el-option v-for="(bd, idx) in quesOptions"
                           :value="bd.value" :label="bd.label"
                           :disabled="bd.disabled">{{bd.label}}
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="nav-table" v-loading="loading">
      <el-table :data="quesData" :height="tableHeight"
                border size="medium">
        <el-table-column type="index"
                         label="序号"
                         width="50">
        </el-table-column>
        <el-table-column prop="name"
                         label="姓名"
                         width="90">
        </el-table-column>
        <el-table-column prop="number"
                         label="工号"
                         width="130">
        </el-table-column>
        <el-table-column prop="tel"
                         label="手机号"
                         width="130">
        </el-table-column>
        <el-table-column label="地区"
                         width="180">
          <template slot-scope="scope">
            <span v-text="`${scope.row.province} ${scope.row.city} ${scope.row.county}`"></span>
          </template>
        </el-table-column>
        <el-table-column label="在校居住"
                         width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.inDorm">
              <el-tag size="small">是</el-tag>
            </span>
            <span v-else>
              <el-tag size="small" type="info">否</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="在校上班"
                         width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.workInSchool">
              <el-tag size="small">是</el-tag>
            </span>
            <span v-else>
              <el-tag size="small" type="info">否</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="外出聚会"
                         width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.hasOut">
              <el-tag size="small">是</el-tag>
            </span>
            <span v-else>
              <el-tag size="small" type="info">否</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="是否封路"
                         width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.hasBlock">
              <el-tag size="small">是</el-tag>
            </span>
            <span v-else>
              <el-tag size="small" type="info">否</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="周边有症状"
                         width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.hasRound">
              <el-tag size="small" type="danger">是</el-tag>
            </span>
            <span v-else>
              <el-tag size="small" type="success">否</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="武汉接触史">
          <template slot-scope="scope">
            <div class="tags-col" v-if="scope.row.hasWuhan">
              <el-tag v-for="(ques, idx) in scope.row.ques" :key="idx" type="danger"
                      size="mini">{{ques.label}}
              </el-tag>
            </div>
            <span v-else>
              <el-tag size="small" type="success">否 (无接触)</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="身体状况">
          <template slot-scope="scope">
            <div class="tags-col">
              <el-tag v-for="(bd, idx) in scope.row.body" :key="idx"
                      :type="bd.value != 10?'danger':'success'" size="mini">{{bd.label}}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="postDate"
                         label="填报日期"
                         width="110px">
        </el-table-column>
        <el-table-column label="操作"
                         width="130">
          <template slot-scope="scope">
            <el-button type="danger" size="mini"
                       icon="el-icon-delete" @click="doDel(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="nav-pagination">
      <el-pagination
          @size-change="getPage"
          @current-change="getPage"
          :current-page.sync="search.page"
          :page-size="search.size"
          layout="total, prev, pager, next"
          :total="totalElements">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {bodyOptions, quesOptions} from '../../assets/js/QueOptions'

  export default {
    name: "QueTable",
    data() {
      return {
        bodyOptions: Object.assign(bodyOptions),
        quesOptions: Object.assign(quesOptions),
        search: {
          page: 1,
          size: 14,

          dateRange: [],
          body: [],
          ques: []
        },
        totalElements: 0,
        pageInfo: {},
        quesData: [],
        locationOpts: [{
          value: '安徽',
          label: '安徽',
          children: [{
            label: '安徽省'
          }, {
            value: '合肥',
            label: '合肥'
          }, {
            value: '六安',
            label: '六安'
          }, {
            value: '蚌埠',
            label: '蚌埠'
          }, {
            value: '淮北',
            label: '淮北'
          }]
        }, {
          value: '湖北',
          label: '湖北',
          children: [{
            label: '湖北省'
          },{
            value: '武汉',
            label: '武汉'
          }]
        }],
        loading: false,
        showMoreSearch: false
      }
    },
    computed: {
      tableHeight() {
        let dv = 260
        if (this.showMoreSearch) dv = 362
        return `calc(100vh - ${dv}px)`
      }
    },
    watch: {
      'search.body'(nv) {
        this.$utils.checkOpts(nv, 10, this.search.body, this.bodyOptions)
      },
      search: {
        deep: true,
        handler(nv, ov) {
          this.getPage()
        }
      }
    },
    methods: {
      getPage() {
        this.loading = true
        this.$axios.post('/question/page', this._decSearch()).then(rs => {
          let page = rs.data.payload
          this.quesData = page.content
          this.totalElements = page.totalElements
        }).catch(err => {
          this.quesData = []
          this.totalElements = 0
        }).finally(e => {
          this.loading = false
        })
      },
      doDel(row) {
        this.$alert(`确定删除【${row.name}】的填报记录？`, '删除提示？').then(e => {
          this.$axios.delete(`/question/${row.id}`).then(rs => {
            this.$message.success('删除成功！')
            this.getPage()
          }).catch(err => {
            this.$message.warning('删除失败！')
          })
        }).catch(e => e)
      },
      //// private
      _decSearch() {
        let search = Object.assign({}, this.search)
        let body = this.search.body,
            ques = this.search.ques,
            local = this.search.location
        if (body) {
          search.body = body.map(v => {
            return {value: v}
          })
        }
        if (ques) {
          search.ques = ques.map(v => {
            return {value: v}
          })
        }
        if (local && local.length != 0) {
          search.province = local[0]
          search.city = local[1]
          search.county = local[2]
          delete search.location
        }
        return search
      }
    },
    created() {
      this.getPage()
    }
  }
</script>

<style>
  .min-picker .el-date-editor {
    width: 230px;
  }

  .min-picker input {
    width: 80px !important;
  }

  .tags-col .el-tag {
    margin-right: 5px;
  }
</style>
